import React, { useState, useEffect } from 'react';
import './DashboardPage.css';
import Breadcrumb from '../../components/Breadcrumb';
import '../../components/styles/Breadcrumb.css';
// 直接导入教师管理页面，避免懒加载可能的问题
import TeacherPage from '../teachers/TeacherPage';

const DashboardPage = () => {
  const [activeModule, setActiveModule] = useState('dashboard');
  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
  const [showRoleModal, setShowRoleModal] = useState(false);
  const [showPermissionModal, setShowPermissionModal] = useState(false);
  const [selectedRole, setSelectedRole] = useState<any>(null);
  
  // 从本地存储获取用户角色，默认为普通用户
    const [userRole, setUserRole] = useState('user');
    
    useEffect(() => {
      // 从localStorage获取用户角色信息
      const storedRole = localStorage.getItem('userRole');
      if (storedRole) {
        setUserRole(storedRole);
      }
    }, []);

  // 权限组数据
  const permissionGroups = [
    {
      id: 'system',
      name: '系统管理',
      permissions: [
        { id: 'system_setting', name: '系统设置' },
        { id: 'user_management', name: '用户管理' },
        { id: 'role_management', name: '角色管理' },
        { id: 'audit_logs', name: '审计日志' }
      ]
    },
    {
      id: 'student',
      name: '学生管理',
      permissions: [
        { id: 'student_list', name: '学生列表' },
        { id: 'student_add', name: '添加学生' },
        { id: 'student_edit', name: '编辑学生' },
        { id: 'student_delete', name: '删除学生' }
      ]
    },
    {
      id: 'teacher',
      name: '教师管理',
      permissions: [
        { id: 'teacher_list', name: '教师列表' },
        { id: 'teacher_add', name: '添加教师' },
        { id: 'teacher_edit', name: '编辑教师' },
        { id: 'teacher_delete', name: '删除教师' }
      ]
    },
    {
      id: 'class',
      name: '班级管理',
      permissions: [
        { id: 'class_list', name: '班级列表' },
        { id: 'class_add', name: '添加班级' },
        { id: 'class_edit', name: '编辑班级' },
        { id: 'class_delete', name: '删除班级' }
      ]
    },
    {
      id: 'attendance',
      name: '考勤管理',
      permissions: [
        { id: 'attendance_record', name: '考勤记录' },
        { id: 'attendance_report', name: '考勤报表' },
        { id: 'leave_management', name: '请假管理' }
      ]
    },
    {
      id: 'grade',
      name: '成绩管理',
      permissions: [
        { id: 'grade_input', name: '成绩录入' },
        { id: 'grade_query', name: '成绩查询' },
        { id: 'grade_report', name: '成绩报表' }
      ]
    }
  ];

  // 角色数据
  const roles = [
    { id: 1, name: '超级管理员', description: '系统最高权限角色', userCount: 2, createdAt: '2023-06-15' },
    { id: 2, name: '普通管理员', description: '具有基本管理权限', userCount: 5, createdAt: '2023-06-20' },
    { id: 3, name: '教师', description: '教师账号角色', userCount: 87, createdAt: '2023-07-01' },
    { id: 4, name: '学生', description: '学生账号角色', userCount: 1245, createdAt: '2023-07-01' },
    { id: 5, name: '导员', description: '管理班级的特殊角色', userCount: 42, createdAt: '2023-07-10' },
    { id: 6, name: '教务管理员', description: '负责教务管理', userCount: 8, createdAt: '2023-07-15' },
    { id: 7, name: '家长', description: '查看学生信息的角色', userCount: 980, createdAt: '2023-08-01' },
    { id: 8, name: '财务管理员', description: '负责财务管理', userCount: 3, createdAt: '2023-08-10' }
  ];

  // 根据角色定义不同的导航菜单
  const roleMenus = {
    admin: [
      { id: 'dashboard', title: '首页' },
      { id: 'students', title: '学生管理' },
      { id: 'teachers', title: '教师管理' },
      { id: 'classes', title: '班级管理' },
      { id: 'attendance', title: '考勤管理' },
      { id: 'grades', title: '成绩管理' },
      { id: 'dormitories', title: '宿舍管理' },
      { id: 'marketing', title: '市场部管理' },
      { id: 'roles', title: '角色分配' },
      { id: 'audit', title: '审计日志' },
      { id: 'settings', title: '系统设置' }
    ],
      '普通管理员': [
      { id: 'dashboard', title: '首页' },
      { id: 'students', title: '学生管理' },
      { id: 'teachers', title: '教师管理' },
      { id: 'classes', title: '班级管理' },
      { id: 'attendance', title: '考勤管理' },
      { id: 'grades', title: '成绩管理' },
      { id: 'dormitories', title: '宿舍管理' },
      { id: 'marketing', title: '市场部管理' },
      { id: 'settings', title: '系统设置' }
    ],
      '教师': [
        { id: 'dashboard', title: '首页' },
        { id: 'students', title: '学生管理' },
        { id: 'classes', title: '班级管理' },
        { id: 'dormitories', title: '宿舍管理' },
        { id: 'attendance', title: '考勤管理' },
        { id: 'grades', title: '成绩管理' }
      ],
      '学生': [
        { id: 'dashboard', title: '首页' },
        { id: 'dormitories', title: '宿舍管理' },
        { id: 'attendance', title: '考勤管理' },
        { id: 'grades', title: '成绩管理' }
      ],
      user: [
        { id: 'dashboard', title: '首页' }
      ]
    };
    
    // 根据用户角色获取菜单项
    const menuItems = roleMenus[userRole as keyof typeof roleMenus] || roleMenus.user;

  // 处理登出
  const handleLogout = () => {
    // 清除本地存储中的用户信息
    localStorage.removeItem('userRole');
    localStorage.removeItem('userName');
    localStorage.removeItem('userEmail');
    localStorage.removeItem('admin_token');
    // 跳转到登录页
    window.location.href = '/login';
  };

  // 处理添加角色
  const handleAddRole = () => {
    setSelectedRole(null);
    setShowRoleModal(true);
  };

  // 处理编辑角色
  const handleEditRole = (role: any) => {
    setSelectedRole(role);
    setShowRoleModal(true);
  };

  // 处理删除角色
  const handleDeleteRole = (roleId: number) => {
    if (window.confirm('确定要删除这个角色吗？此操作不可撤销。')) {
      console.log('删除角色:', roleId);
      // 实际应用中这里会调用API删除角色
      // 可以通过setState更新本地状态
    }
  };

  // 处理权限管理
  const handleManagePermissions = (role: any) => {
    setSelectedRole(role);
    setShowPermissionModal(true);
  };

  // 保存角色
  const handleSaveRole = () => {
    console.log('保存角色:', selectedRole);
    // 实际应用中这里会调用API保存角色
    setShowRoleModal(false);
  };

  // 保存权限设置
  const handleSavePermissions = () => {
    console.log('保存权限设置:', selectedRole?.name);
    // 实际应用中这里会调用API保存权限设置
    setShowPermissionModal(false);
  };

  // 渲染模块内容
  const renderModuleContent = () => {
    // 定义不同角色的欢迎语
    const welcomeMessages = {
      admin: '欢迎回来，系统管理员！您有 3 条待处理事项和 2 个新用户注册。',
      '普通管理员': '欢迎回来，管理员！今日有 15 名学生请假和 3 个班级需要排课。',
      '教师': `欢迎回来，${localStorage.getItem('userName') || '老师'}！您今天有 3 节课和 12 份作业需要批改。`,
      '学生': `您好，${localStorage.getItem('userName') || '同学'}！本周您有 4 次考勤记录和 2 门课程成绩已更新。`,
      user: '欢迎使用教育管理系统，请联系管理员获取适当权限。'
    };
    
    // 定义不同角色的统计卡片
    const roleStatistics = {
      admin: [
        { title: '在校学生总数', value: '1,245', change: '+28', type: 'positive' },
        { title: '在职教师总数', value: '87', change: '+3', type: 'positive' },
        { title: '开设班级数', value: '42', change: '+2', type: 'positive' },
        { title: '今日考勤率', value: '98.3%', change: '+0.8%', type: 'positive' }
      ],
      '普通管理员': [
        { title: '在校学生总数', value: '1,245', change: '+28', type: 'positive' },
        { title: '在职教师总数', value: '87', change: '+3', type: 'positive' },
        { title: '开设班级数', value: '42', change: '+2', type: 'positive' },
        { title: '今日请假人数', value: '15', change: '+5', type: 'negative' }
      ],
      '教师': [
        { title: '负责班级数', value: '3', change: '', type: 'neutral' },
        { title: '学生总数', value: '120', change: '', type: 'neutral' },
        { title: '今日出勤', value: '118/120', change: '+2', type: 'positive' },
        { title: '待批改作业', value: '12', change: '-3', type: 'positive' }
      ],
      '学生': [
        { title: '已完成课程', value: '28', change: '+2', type: 'positive' },
        { title: '待完成课程', value: '5', change: '-1', type: 'positive' },
        { title: '平均成绩', value: '88.5', change: '+1.2', type: 'positive' },
        { title: '出勤率', value: '96%', change: '0%', type: 'neutral' }
      ],
      user: [
        { title: '系统状态', value: '正常运行', change: '', type: 'positive' },
        { title: '最近更新', value: '2023-09-15', change: '', type: 'neutral' }
      ]
    };
    
    // 根据用户角色获取统计卡片
    const statistics = roleStatistics[userRole as keyof typeof roleStatistics] || roleStatistics.user;
    
    // 根据用户角色获取欢迎语
    const welcomeMessage = welcomeMessages[userRole as keyof typeof welcomeMessages] || welcomeMessages.user;
    
    switch (activeModule) {
      case 'dashboard':
        return (
          <div className="dashboard-content">
            <h2>首页</h2>
            <p className="welcome-message">{welcomeMessage}</p>
            <div className="dashboard-cards">
              {statistics.map((card, index) => (
                <div key={index} className="card">
                  <h3>{card.title}</h3>
                  <p className="card-value">{card.value}</p>
                  {card.change && <span className={`card-change ${card.type}`}>{card.change}</span>}
                </div>
              ))}
            </div>
            <div className="recent-activities">
              <h3>最近活动</h3>
              <ul className="activity-list">
                {userRole === 'admin' && (
                  <>
                    <li>新注册用户：李明（学生）、王芳（教师）</li>
                    <li>系统设置已更新：考勤规则调整</li>
                    <li>角色权限变更：普通管理员新增数据导出权限</li>
                    <li>安全日志：检测到 3 次异常登录尝试</li>
                  </>
                )}
                {userRole === '普通管理员' && (
                  <>
                    <li>新学生注册：张小明（高三(2)班）</li>
                    <li>班级创建：新开设高三(5)班，班主任：王老师</li>
                    <li>考勤异常：今日有 5 名学生缺勤超过 2 小时</li>
                    <li>考试安排：下周二（9月18日）数学期中考试</li>
                  </>
                )}
                {userRole === '教师' && (
                  <>
                    <li>考勤完成：已记录高三(2)班今日出勤情况</li>
                    <li>作业发布：数学练习三已发布至班级群</li>
                    <li>成绩录入：语文第一单元测验成绩已录入</li>
                    <li>家长反馈：收到 3 位家长关于学生学习情况的询问</li>
                  </>
                )}
                {userRole === '学生' && (
                  <>
                    <li>作业完成：语文作文《我的理想》已提交</li>
                    <li>成绩公布：数学第一次月考成绩 88 分</li>
                    <li>考勤记录：本周考勤全勤，获得积分 +5</li>
                    <li>班级通知：下周三进行秋季运动会彩排</li>
                  </>
                )}
                {userRole === 'user' && (
                  <>
                    <li>欢迎使用教育管理系统</li>
                    <li>请联系管理员获取适当的系统权限</li>
                    <li>系统支持：若有使用问题，请联系技术支持</li>
                  </>
                )}
              </ul>
            </div>
          </div>
        );
      case 'students':
        // 只有管理员和教师可以访问学生管理
        if (userRole !== 'admin' && userRole !== '普通管理员' && userRole !== '教师') {
          return (
            <div className="module-content">
              <h2>权限不足</h2>
              <p>您没有权限访问此模块，请联系管理员获取权限。</p>
            </div>
          );
        }
        // 导入并渲染学生管理组件
        const StudentPage = React.lazy(() => import('../students/StudentPage'));
        return (
          <React.Suspense fallback={<div className="loading">加载中...</div>}>
            <StudentPage />
          </React.Suspense>
        );
      case 'teachers':
        // 只有管理员可以访问教师管理
        if (userRole !== 'admin' && userRole !== '普通管理员') {
          return (
            <div className="module-content">
              <h2>权限不足</h2>
              <p>您没有权限访问此模块，请联系管理员获取权限。</p>
            </div>
          );
        }
        // 直接渲染教师管理组件
        return <TeacherPage />;
      case 'classes':
        // 只有管理员和教师可以访问班级管理
        if (userRole !== 'admin' && userRole !== '普通管理员' && userRole !== '教师') {
          return (
            <div className="module-content">
              <h2>权限不足</h2>
              <p>您没有权限访问此模块，请联系管理员获取权限。</p>
            </div>
          );
        }
        // 导入并渲染班级管理组件
        const ClassPage = React.lazy(() => import('../classes/ClassPage'));
        return (
          <React.Suspense fallback={<div className="loading">加载中...</div>}>
            <ClassPage />
          </React.Suspense>
        );
      case 'attendance':
        // 导入并渲染考勤管理组件
        const AttendancePage = React.lazy(() => import('../attendance/AttendancePage'));
        return (
          <React.Suspense fallback={<div className="loading">加载考勤管理模块中...</div>}>
            <AttendancePage />
          </React.Suspense>
        );
      case 'grades':
        // 导入并渲染成绩管理组件
        const GradePage = React.lazy(() => import('../grades/GradePage'));
        return (
          <React.Suspense fallback={<div className="loading">加载成绩管理模块中...</div>}>
            <GradePage />
          </React.Suspense>
        );
      case 'roles':
        // 只有管理员可以访问角色分配
        if (userRole !== 'admin') {
          return (
            <div className="module-content">
              <h2>权限不足</h2>
              <p>您没有权限访问此模块，请联系管理员获取权限。</p>
            </div>
          );
        }
        return (
          <div className="dashboard-content">
            <h2>角色分配</h2>
            <div className="role-management">
              <div className="role-actions">
                <button className="add-role-btn" onClick={handleAddRole}>添加角色</button>
                <div className="search-bar">
                  <input type="text" placeholder="搜索角色..." />
                  <button className="search-btn">搜索</button>
                </div>
              </div>
              <div className="roles-table-container">
                <table className="roles-table">
                  <thead>
                    <tr>
                      <th>角色ID</th>
                      <th>角色名称</th>
                      <th>角色描述</th>
                      <th>用户数量</th>
                      <th>创建时间</th>
                      <th>操作</th>
                    </tr>
                  </thead>
                  <tbody>
                    {roles.map(role => (
                      <tr key={role.id}>
                        <td>{role.id}</td>
                        <td>{role.name}</td>
                        <td>{role.description}</td>
                        <td>{role.userCount}</td>
                        <td>{role.createdAt}</td>
                        <td>
                          <button className="edit-btn" onClick={() => handleEditRole(role)}>编辑</button>
                          <button className="delete-btn" onClick={() => handleDeleteRole(role.id)}>删除</button>
                          <button className="permissions-btn" onClick={() => handleManagePermissions(role)}>权限设置</button>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
              <div className="pagination">
                <button className="page-btn prev">上一页</button>
                <button className="page-btn active">1</button>
                <button className="page-btn">2</button>
                <button className="page-btn next">下一页</button>
              </div>
            </div>
          </div>
        );
      case 'settings':
        // 只有管理员和普通管理员可以访问系统设置
        if (userRole !== 'admin' && userRole !== '普通管理员') {
          return (
            <div className="module-content">
              <h2>权限不足</h2>
              <p>您没有权限访问此模块，请联系管理员获取权限。</p>
            </div>
          );
        }
        // 导入并渲染系统设置组件
        const SettingPage = React.lazy(() => import('../settings/SettingPage'));
        return (
          <React.Suspense fallback={<div className="loading">加载系统设置模块中...</div>}>
            <SettingPage />
          </React.Suspense>
        );
      case 'audit':
        // 只有管理员可以访问审计日志
        if (userRole !== 'admin') {
          return (
            <div className="module-content">
              <h2>权限不足</h2>
              <p>您没有权限访问此模块，请联系管理员获取权限。</p>
            </div>
          );
        }
        // 导入并渲染审计日志组件
        const AuditLogPage = React.lazy(() => import('../audit/AuditLogPage'));
        return (
          <React.Suspense fallback={<div className="loading">加载审计日志模块中...</div>}>
            <AuditLogPage />
          </React.Suspense>
        );
      case 'dormitories':
        // 管理员、普通管理员和教师可以访问宿舍管理
        if (userRole !== 'admin' && userRole !== '普通管理员' && userRole !== '教师') {
          return (
            <div className="module-content">
              <h2>权限不足</h2>
              <p>您没有权限访问此模块，请联系管理员获取权限。</p>
            </div>
          );
        }
        // 导入并渲染宿舍管理组件
        const DormitoryPage = React.lazy(() => import('../dormitories/DormitoryPage'));
        return (
          <React.Suspense fallback={<div className="loading">加载宿舍管理模块中...</div>}>
            <DormitoryPage />
          </React.Suspense>
        );
      case 'marketing':
        // 只有管理员和普通管理员可以访问市场部管理
        if (userRole !== 'admin' && userRole !== '普通管理员') {
          return (
            <div className="module-content">
              <h2>权限不足</h2>
              <p>您没有权限访问此模块，请联系管理员获取权限。</p>
            </div>
          );
        }
        // 导入并渲染市场部管理组件
        const MarketingPage = React.lazy(() => import('../../pages/marketing/MarketingPage'));
        return (
          <React.Suspense fallback={<div className="loading">加载市场部管理模块中...</div>}>
            <MarketingPage />
          </React.Suspense>
        );
      default:
        return <div className="module-content"><h2>首页</h2><p>欢迎使用管理系统</p></div>;
    }
  };

  return (
    <div className="dashboard-container">
      {/* 侧边栏 */}
      <aside className={`sidebar ${sidebarCollapsed ? 'collapsed' : ''}`}>
        <div className="sidebar-header">
          <h1 className="system-title">{sidebarCollapsed ? 'MS' : '管理系统'}</h1>
          <button 
            className="collapse-toggle"
            onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
          >
            {sidebarCollapsed ? '▶' : '◀'}
          </button>
        </div>
        <nav className="sidebar-nav">
          <ul>
            {menuItems.map(item => (
              <li 
                key={item.id}
                className={`nav-item ${activeModule === item.id ? 'active' : ''}`}
                onClick={() => setActiveModule(item.id)}
              >
                <span className={`nav-title ${sidebarCollapsed ? 'hidden' : ''}`}>
                  {item.title}
                </span>
              </li>
            ))}
          </ul>
        </nav>
        <div className="sidebar-footer">
          <button className="logout-btn" onClick={handleLogout}>
            <span className={`nav-title ${sidebarCollapsed ? 'hidden' : ''}`}>
              退出登录
            </span>
          </button>
        </div>
      </aside>

      {/* 主内容区域 */}
      <main className="main-content">
        <header className="main-header">
          <h1 className="page-title">{menuItems.find(item => item.id === activeModule)?.title}</h1>
          <Breadcrumb 
            items={[
              { id: 'dashboard', title: '首页' },
              ...(activeModule !== 'dashboard' ? [
                { id: activeModule, title: menuItems.find(item => item.id === activeModule)?.title || '' }
              ] : [])
            ]} 
            activeItemId={activeModule} 
          />
          <div className="header-actions">
            <button className="notification-btn">🔔</button>
            <div className="user-profile">
          <span className="user-name">
            你好！{localStorage.getItem('userName') || '管理员'}
          </span>
        </div>
          </div>
        </header>
        <div className="content-wrapper">
          {renderModuleContent()}
        </div>
      </main>

      {/* 角色编辑/添加弹窗 */}
      {showRoleModal && (
        <div style={{
          position: 'fixed',
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          backgroundColor: 'rgba(0,0,0,0.5)',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          zIndex: 1000
        }}>
          <div style={{
            backgroundColor: 'white',
            padding: '24px',
            borderRadius: '8px',
            width: '90%',
            maxWidth: '500px'
          }}>
            <h3>{selectedRole ? '编辑角色' : '添加角色'}</h3>
            <div style={{ marginBottom: '16px', marginTop: '16px' }}>
              <label style={{ display: 'block', marginBottom: '4px', fontWeight: '500' }}>角色名称</label>
              <input 
                type="text" 
                defaultValue={selectedRole?.name || ''} 
                style={{ 
                  width: '100%', 
                  padding: '10px', 
                  border: '1px solid #e2e8f0',
                  borderRadius: '6px',
                  fontSize: '14px'
                }} 
              />
            </div>
            <div style={{ marginBottom: '16px' }}>
              <label style={{ display: 'block', marginBottom: '4px', fontWeight: '500' }}>角色描述</label>
              <textarea 
                defaultValue={selectedRole?.description || ''} 
                style={{ 
                  width: '100%', 
                  padding: '10px', 
                  border: '1px solid #e2e8f0',
                  borderRadius: '6px',
                  fontSize: '14px',
                  minHeight: '80px',
                  resize: 'vertical'
                }} 
              />
            </div>
            <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '12px', marginTop: '24px' }}>
              <button 
                onClick={() => setShowRoleModal(false)}
                style={{
                  padding: '8px 16px',
                  border: '1px solid #e2e8f0',
                  backgroundColor: 'white',
                  borderRadius: '6px',
                  cursor: 'pointer',
                  fontSize: '14px'
                }}
              >
                取消
              </button>
              <button 
                onClick={handleSaveRole}
                style={{
                  padding: '8px 16px',
                  border: 'none',
                  backgroundColor: '#64b5f6',
                  color: 'white',
                  borderRadius: '6px',
                  cursor: 'pointer',
                  fontSize: '14px'
                }}
              >
                保存
              </button>
            </div>
          </div>
        </div>
      )}

      {/* 权限设置弹窗 */}
      {showPermissionModal && (
        <div style={{
          position: 'fixed',
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          backgroundColor: 'rgba(0,0,0,0.5)',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          zIndex: 1000
        }}>
          <div style={{
            backgroundColor: 'white',
            padding: '24px',
            borderRadius: '8px',
            width: '90%',
            maxWidth: '700px',
            maxHeight: '80vh',
            overflow: 'auto'
          }}>
            <h3>权限设置 - {selectedRole?.name}</h3>
            <div style={{ marginTop: '16px' }}>
              {permissionGroups.map(group => (
                <div key={group.id} style={{ marginBottom: '24px', paddingBottom: '16px', borderBottom: '1px solid #f3f4f6' }}>
                  <h4 style={{ marginBottom: '12px', color: '#374151', fontWeight: '600' }}>{group.name}</h4>
                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: '16px' }}>
                    {group.permissions.map(permission => (
                      <div key={permission.id} style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
                        <input type="checkbox" id={permission.id} />
                        <label htmlFor={permission.id} style={{ fontSize: '14px' }}>{permission.name}</label>
                      </div>
                    ))}
                  </div>
                </div>
              ))}
            </div>
            <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '12px', marginTop: '24px' }}>
              <button 
                onClick={() => setShowPermissionModal(false)}
                style={{
                  padding: '8px 16px',
                  border: '1px solid #e2e8f0',
                  backgroundColor: 'white',
                  borderRadius: '6px',
                  cursor: 'pointer',
                  fontSize: '14px'
                }}
              >
                取消
              </button>
              <button 
                onClick={handleSavePermissions}
                style={{
                  padding: '8px 16px',
                  border: 'none',
                  backgroundColor: '#64b5f6',
                  color: 'white',
                  borderRadius: '6px',
                  cursor: 'pointer',
                  fontSize: '14px'
                }}
              >
                保存设置
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default DashboardPage;